<template>
    <div class="quick-wrap">
        <ul class="quick-body" v-if="store.quick.length">
            <li
                    class="quick-item radius"
                    v-for="(item, index) in store.quick"
                    :key="index"
                    :title="item.title"
                    @click="openPage(item)"
            >
                <div class="quick-img shadow">
                    <img :src="item.icon" alt=""/>
                </div>
                <div class="quick-text">{{item.title}}</div>
            </li>
        </ul>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import website from "/src/config/website";
    import {goUrl, openPage} from '/src/util/index';

    export default {
        name: "Quick",
        components: {},
        data() {
            return {
                store: useStore().state,
            }
        },
        created() {
            this.getQuick();
        },
        mounted() {

        },
        methods: {
            // 数据列表
            getQuick(refresh = false) {
                let that = this;
                that.$store.dispatch('getQuick', {limit: website.quickLimit, refresh: refresh}).then(list => {
                    console.log('getQuick', list);
                });
            },
            // 跳转
            openPage(item) {
                console.log(item);
                let that = this;
                that.$store.dispatch('clickBookmark', {
                    uwid: item.id,
                    wid: item.wid,
                }).then(res => {
                    openPage(item.url, 'quick');
                })
            },
            // goUrl
            goUrl(url) {
                goUrl(url);
            },
        },
        watch: {
            // key 变化
            '$store.state.key'(val) {
                this.getQuick(true);
            },
        }
    }
</script>

<style lang="less" scoped>
    @bgColor: #FFFFFF;
    @radius: 4px;

    .quick-wrap {
        text-align: center;

        .quick-body {
            display: inline-block;
            width: auto;
            font-size: 0; // 解决display: inline-block;布局行与行之间间隙
            margin-top: 50px;

            .quick-item {
                display: inline-block;
                width: 100px;
                height: 100px;
                text-align: center;

                &:hover {
                    cursor: pointer;

                    .quick-img {
                        transform: translateY(-2px);
                        -webkit-transform: translateY(-2px);
                        -moz-transform: translateY(-2px);
                    }
                }

                .quick-img {
                    display: inline-block;
                    padding: 10px;
                    width: 50px;
                    height: 50px;
                    background-color: white;
                    border-radius: @radius;
                    margin: 10px 0;
                    transform: translateY(0px);
                    -webkit-transform: translateY(0px);
                    -moz-transform: translateY(0px);
                    -webkit-transition: all 0.3s ease;
                    -moz-transition: all 0.3s ease;
                    -o-transition: all 0.3s ease;

                    img {
                        position: relative;
                        display: block;
                        width: 30px;
                        height: 30px;
                        border-radius: @radius;

                        &:after {
                            content: '';
                            display: block;
                            width: 30px;
                            height: 30px;
                            position: absolute;
                            z-index: 2;
                            top: 0;
                            left: 0;
                            background: url('/src/assets/imgs/network.png') white;
                            background-size: 100%;
                        }
                    }
                }

                .quick-text {
                    height: 20px;
                    line-height: 20px;
                    font-size: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding: 0 10px;
                    color: white;
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        .quick-wrap {
            .quick-body {
                margin-top: 20px;

                .quick-item {
                    width: 80px;
                }
            }
        }

    }

</style>
